<template>
  <div class="outline" :class="{ vnLang: lang === 'VN' || lang === 'ID' }">
    <div class="top">
      <div class="week" v-for="(item, index) in weekList">
        <div>{{ item.title }}</div>
        <div class="date">{{ item.date }}</div>
      </div>
    </div>

    <div class="center">
      <div
        v-for="(item, index) in timeList"
        :key="index"
        class="grid-item"
        :class="{
          active: selectedArr.includes(item.time),
          side: startEndArr.includes(item.time),
          disabled: item.num >= 3
        }"
        @click="itemClick(item)"
      >
        <div class="top-left">{{ item.time }}</div>
        <div class="text-12px" v-if="startEndArr.includes(item.time)">
          {{ startEndArr[0] == item.time ? '开始' : '结束' }}
        </div>
        <div class="bottom-right">{{ `(${item.num}/3)` }}</div>
      </div>
    </div>

    <div class="button">按钮</div>
  </div>
</template>
<script>
function getRandomNumber() {
  return Math.floor(Math.random() * 4)
}
function getHoursFromTime(timeStr) {
  const [hours, minutes] = timeStr.split(':').map(Number)
  return hours
}
export default {
  data() {
    return {
      activityName: 'template', // 活动页面点击统计，一般和页面同名
      identity: '29963772', // 测试id，应用内打开会被赋值成真实用户id
      token: '', // 测试token，应用内打开会被赋值成真实用户token
      // identity: '35737531',

      weekList: [
        {
          title: '星期一',
          date: '(07-01)'
        },
        {
          title: '星期二',
          date: '(07-02)'
        },
        {
          title: '星期三',
          date: '(07-03)'
        },
        {
          title: '星期四',
          date: '(07-04)'
        },
        {
          title: '星期五',
          date: '(07-05)'
        },
        {
          title: '星期六',
          date: '(07-06)'
        },
        {
          title: '星期日',
          date: '(07-07)'
        }
      ],
      timeList: [],
      startEnd: []
    }
  },
  created() {
    this.init()
  },

  computed: {
    newList() {
      return getOnlyVedio(this.orderImage, 1, 'video') //过滤的数组，保留几个，过滤的类型
      function getOnlyVedio(arr, num, type) {
        let i = 0
        let res = []
        for (const item of arr) {
          if (item.type === type) {
            if (i >= num) continue
            i++
          }
          res.push(item)
        }
        return res
      }
    },
    selected() {
      const [start, end] = this.startEnd
      const res = []
      if (!start || !end) {
        return []
      }
      const startIndex = this.timeList.findIndex(item => item.time === start)
      const endIndex = this.timeList.findIndex(item => item.time === end)
      for (let i = startIndex; i <= endIndex; i++) {
        if (this.timeList[i].num >= 3) {
          break
        }
        if (res.length >= 3) {
          break
        }
        res.push(this.timeList[i])
      }
      return res
    },
    selectedArr() {
      return this.selected.map(item => item.time)
    },
    startEndArr() {
      return this.selectedArr.length
        ? [this.selectedArr[0], this.selectedArr[this.selectedArr.length - 1]]
        : [...this.startEnd]
    }
  },

  mounted() {},
  methods: {
    init() {
      for (let hour = 0; hour < 24; hour++) {
        let hourString = hour < 10 ? `0${hour}` : `${hour}`
        this.timeList.push({
          time: `${hourString}:00`,
          num: getRandomNumber()
        })
      }
    },
    // 从这里开始写活动逻辑
    itemClick(item) {
      if (!item.time || item.num >= 3) {
        return
      }
      if (
        this.startEnd.length >= 1 &&
        getHoursFromTime(item.time) < getHoursFromTime(this.startEnd[0])
      ) {
        this.startEnd = []
        this.startEnd.push(item.time)
        return
      }
      if (this.startEnd.length >= 2) {
        this.startEnd = []
      }
      !this.startEnd.includes(item.time) && this.startEnd.push(item.time)
    }
  }
}
</script>
<style scoped lang="less">
.cen() {
  display: flex;
  align-items: center;
  justify-content: center;
}
.cenCol() {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.top {
  .cen();
  gap: 10px;
  margin: 20px 10px;

  .week {
    border: 1px solid;
  }
  .date {
    font-size: 10px;
  }
}

.center {
  width: 100%;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  padding: 10px;

  .grid-item {
    // position: relative; /* 使子元素的定位相对于此元素 */
    margin: 0px -1px -1px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20%; /* 5x5 格子布局，宽度占 1/5 */
    height: 60px; /* 5x5 格子布局，高度占 1/5 */
    border: 1px solid #ccc; /* 可选：添加边框 */
    padding: 2px;
    box-sizing: border-box;
  }

  .top-left {
    align-self: flex-start;
    font-size: 12px; /* 根据需要调整字体大小 */
  }

  .bottom-right {
    align-self: flex-end;

    font-size: 12px; /* 根据需要调整字体大小 */
  }
}

.button {
  width: 250px;
  height: 50px;
  background: pink;
  margin: 10px auto;
  border-radius: 10px;
  .cen();
}
.active {
  box-sizing: border-box;

  background: #fde6e9;
  color: #f46374;
}
.side {
  box-sizing: border-box;
  background: #ee0a24;
  color: #fff;
}
.disabled {
  background: #555;
}
</style>
<style>
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}
</style>
